import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Modal, Form, message, Table,Button } from 'antd';
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'

export default class InfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: null,
            submitUrl:'/base/region/c',
            sortedInfo:null,
            filteredInfo: null,
            conditonData:{}
        };

 
    }

    renderColumns(text) {
        if(text == '0'){
            return (<span>可用</span>);
        }else if(text == '1'){
            return (<span>冻结</span>);
        }else if(text == '2'){
            return (<span>已出库</span>);
        }else if(text == '3'){
            return (<span>抽检冻结</span>);
        }
    }

    renderColumns1(text) {
        if(text == '2'){
            return (<span>质量冻结</span>);
        }else if(text == '4'){
            return (<span>手工冻结</span>);
        }else if(text == '1'){
            return (<span>抽检冻结</span>);
        }else if(text == '3'){
            return (<span>调拨冻结</span>);
        }
    }

    //显示弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
            filteredInfo:null
        },()=>{
            // console.log(this.state.filteredInfo)
        });
    }

    handleOk = () => {
        this.setState({
            visible: false,
        });
        this.refreshHandle();
    }

    handleCancel = () => {
        this.setState({
            visible: false,
            filteredInfo: null,
            sortedInfo:null
        });

    }
    handleChange = (pagination, filters, sorter) => {
        // console.log('参数sorter', sorter);
        this.setState({
          filteredInfo: filters,
          sortedInfo: sorter,
        });
      }
    //刷新List列表
    refreshHandle = () => {
        this.props.refreshHandle();
    }

    onClickDC = () =>{
        let conditonData = this.state.conditonData;
       // console.log('-------导出条件--------',conditonData); 
        let param ='?'
        for(let key in conditonData){
            if(conditonData[key]!=''){
                console.log(key,conditonData[key]);
                param = param + key + '=' + conditonData[key] + '&'
            }
        }
        // console.log(param);
        window.location.href='/wmsrest/product/odsprostoragesn/r/detail/exp'+param;
    }

    // (外部调用)
    editHandle  = (resData,pstData) => {
        this.setState({
            visible: true,
            formTitle: '原材料条码详情',
            dataSource: resData.data,
            conditonData:pstData
        });
        // console.log("pstData",pstData),
        // console.log("edit",this.state.filteredInfo)
    }

    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        this.columns = [
            {
                title: '条码',
                dataIndex: 'barcode',
                sortOrder: sortedInfo.columnKey == 'barcode' && sortedInfo.order,
                sorter: (a,b)=>a.barcode.substr(a.barcode.length-2)-b.barcode.substr(b.barcode.length-2),
                width: '20%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库位',
                dataIndex: 'wlCode',
                width: '10%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库存状态',
                dataIndex: 'barcodeStatus',
                width: '10%',
                filters: [
                    { text: '可用', value: '0' },
                    { text: '冻结', value: '1' },
                    { text: '已出库', value: '2' },
                  ],
                filteredValue: filteredInfo.barcodeStatus || null,
                onFilter: (value, record) => record.barcodeStatus.includes(value),
                render: (text, record, index) => this.renderColumns(text),
            }, {
                title: '合同编号',
                dataIndex: 'contractNo',
                width: '15%',
                sorter:(a,b)=>a.contractNo-b.contractNo,
                sortOrder: sortedInfo.columnKey == 'contractNo' && sortedInfo.order,
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '型号',
                dataIndex: 'model',
                width: '14%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '入库时间',
                dataIndex: 'gmtCreate',
                sorter:(a,b)=>new Date(a.gmtCreate)-new Date(b.gmtCreate),
                sortOrder: sortedInfo.columnKey == 'gmtCreate' && sortedInfo.order,
                width: '15%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            },  {
                title: '型号描述',
                dataIndex: 'modelDesc',
                width: '8%',
                 render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '冻结原因',
                dataIndex: 'lockReason',
                width: '12%',
                render: (text, record, index) => this.renderColumns1(text),
            }
        ];
        return(
            
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1100px'}
                footer=''
                
            >
            {/* <Button type="Excel" onClick={this.onClickDC}>Excel</Button> */}
                <div style={{margin: '10px'}}>
                    {
                        <Table columns={this.columns}
                               dataSource={this.state.dataSource}
                               rowKey={row => row.odsProStorageSnId}
                               showHeader={true}
                               pagination={{ pageSize: 10,size:'default' }}
                               onChange={this.handleChange}
                               //scroll={{ y: 380 }}
                               size="small"
                               bordered
                        />
                    }
                </div>

            </Modal>
        )
    }
}